<template>

  <el-table :data="tableData.filter(data => !search || data.destination.toLowerCase().includes(search.toLowerCase())||data.departure.toLowerCase().includes(search.toLowerCase()))"
            style="width: 100%">
    <el-table-column type="expand">
      <template slot-scope="props">
        <el-form label-position="left"
                 class="demo-table-expand">
          <el-form-item label="日期：">
            <span>{{ props.row.date }}</span>
          </el-form-item>
          <el-form-item label="大巴编号：">
            <span>{{ props.row.number }}</span>
          </el-form-item>
          <el-form-item label="始发城市：">
            <span>{{ props.row.fromcity }}</span>
          </el-form-item>
          <el-form-item label="始发地点：">
            <span>{{ props.row.departure }}</span>
          </el-form-item>
          <el-form-item label="目的城市：">
            <span>{{ props.row.tocity }}</span>
          </el-form-item>
          <el-form-item label="目的地点：">
            <span>{{ props.row.destination }}</span>
          </el-form-item>
          <el-form-item label="起始时间：">
            <span>{{ props.row.begintime }}</span>
          </el-form-item>
          <el-form-item label="到达时间：">
            <span>{{ props.row.endtime }}</span>
          </el-form-item>
          <el-form-item label="过程时长：">
            <span>{{ props.row.duringtime }}</span>
          </el-form-item>
          <el-form-item label="价格：">
            <span>{{ props.row.ticketvalue }}</span>
          </el-form-item>
          <el-form-item label="剩余票数：">
            <span>{{ props.row.ticket }}</span>
          </el-form-item>
        </el-form>

      </template>
    </el-table-column>
    <el-table-column label="出发时间"
                     align="center">
      <el-table-column label="日期"
                       prop="date"
                       align="center"></el-table-column>
      <el-table-column label="时间"
                       prop="begintime"
                       align="center"></el-table-column>
    </el-table-column>
    <el-table-column label="地点"
                     align="center">
      <el-table-column label="始发地"
                       prop="departure"
                       align="center"></el-table-column>
      <el-table-column label="目的地"
                       prop="destination"
                       align="center"></el-table-column>
    </el-table-column>
    <el-table-column label="价格"
                     prop="ticketvalue"
                     align="center"></el-table-column>
    <el-table-column label="剩余票数"
                     prop="ticket"
                     align="center"></el-table-column>
    <el-table-column align="center"
                     width="230px">
      <template slot="header"
                slot-scope={}>
        <el-input v-model="search"
                  size="medium"
                  prefix-icon="el-icon-s-grid"
                  placeholder="输入关键字搜索" />
      </template>
      <template slot-scope='scope'>
        <el-input-number v-model="scope.row.num"
                         :min="1"
                         :max="10"
                         label="描述文字"></el-input-number>
        <el-button size="mini"
                   @click="open(scope.$index, scope.row)">购票</el-button>
      </template>
    </el-table-column>
  </el-table>

</template>
  
  <script>

export default {
  name: 'Table',
  props: ["tableData", "allData"],
  data () {
    return {
      search: '',
      Allvalue: '',
      myMessages: []
    }
  },
  // created () {
  //   let guodu;//eslint-disable-line no-unused-vars
  //   guodu = localStorage.getItem('tableData');
  //   this.tableData = window.JSON.parse(guodu);
  // },
  methods: {

    handleEdit (index, row) {
      console.log(index, row)
    },
    handleDelete (index, row) {
      console.log(index, row)
    },
    open (index, row) {
      this.Allvalue = row.num * row.ticketvalue;
      this.$confirm('请支付' + this.Allvalue + '元人民币', '确认信息', {
        distinguishCancelAndClose: true,
        confirmButtonText: '确认支付',
        cancelButtonText: '放弃支付'
      })
        .then(() => {
          row.ticket -= row.num;
          console.log(row);
          let length = this.myMessages.unshift(row)
          console.log(this.myMessages)
          let guodata = window.JSON.stringify(this.myMessages);
          localStorage.setItem("myMessages", guodata)
          this.allData.forEach((item, index, array) => {
            if (item.number == row.number) {
              item.ticket = row.ticket;
            }
          });
          console.log(this.allData);
          let guo_data;
          if (typeof this.allData == "object") {
            //如果要存储对象，则先转为json串
            console.log(111111111);
            guo_data = window.JSON.stringify(this.allData);
          }
          localStorage.setItem("tableData", guo_data)
          this.$message({
            type: 'success',
            message: '购票成功'
          });
        })
        .catch(action => {
          this.$message({
            type: 'warning',
            message: action === 'cancel'
              ? '取消支付成功'
              : '等待支付'
          })
        });
    }
  }
}
</script>
  <style lang="scss" scoped>
.demo-table-expand {
  font-size: 0;
}
.demo-table-expand label {
  width: 90px;
  color: #99a9bf;
}
.demo-table-expand .el-form-item {
  margin-right: 0;
  margin-bottom: 0;
  width: 50%;
}
.el-input-number {
  width: 120px;
}
.el-button {
  width: 60px;
  height: 40px;
  margin-left: 20px;
}
</style>>